<template>
  <Header />
  <div
    class="shopcar"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    infinite-scroll-distance="10"
    infinite-scroll-immediate="false"
  >
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <ul>
      <li v-for="item in newsList" :key="item.id" class="newsList">
        <div class="newsLeft">
          <img :src="item['img']" />
        </div>
        <div class="newsRight">
          <a class="newsTitle" :href="item['link']">
            {{ item["title"] }}
          </a>
          <span class="newsContent">{{ item.content }} </span>
          <div class="functions">
            来自主题:<span style="color: #4285f4">{{ item["author"] }}</span
            >点赞:<span style="color: #4285f4">{{ item["click"] }}</span>
            <span style="float: right">{{ item["posttime"] }}</span>
          </div>
          <div class="like" @click="like(item.id)">
            <van-icon name="like-o" />
          </div>
        </div>
      </li>
    </ul>
    <div
      v-loading="loading"
      element-loading-text="加载中..."
      style="width: 100%; height: 40px; display: block"
    ></div>
  </div>
  <Footer />
</template>

<script>
import Header from "../Header";
import Footer from "../Footer";
import "element-plus/lib/theme-chalk/index.css";
export default {
  name: "News",
  data() {
    return {
      count: 10,
      loading: false,
      newsList: [],
      AllData: [],
    };
  },
  methods: {
    load: function () {
      this.loading = true;
      console.log(this.loading);
      setTimeout(() => {
        this.count += 5;
        this.newsList = this.AllData.slice(0, this.count);
        this.loading = false;
        console.log(this.loading);
      }, 2000);
    },
    onClickLeft: function () {
      this.$router.go(-1);
    },
    getNewsList: function () {
      this.axios.get("getNewsList.php").then((response) => {
        this.AllData = response.data;
        this.newsList = this.AllData.slice(0, this.count);
        this.$toast.clear();
      });
    },
    like: async function (id) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 500000,
      });
      try {
        let response = await fetch(
          "http://localhost/PHP_Pro01/vue_pro01/extra/likeNews.php?id=" + id
        );
        let result = await response.json();
        console.log(result);
        this.getNewsList();
        this.$toast.clear()
      } catch (e) {
        console.log(e);
      }
    },
  },
  components: {
    Header,
    Footer,
  },
  computed: {
    noMore() {
      return this.count >= 60;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 500000,
    });
    this.getNewsList();
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #4285f4;
}
a:visited {
  color: #4285f4;
}
.shopcar {
  width: 100%;
  margin-top: 50px;
  height: 85vh;
  overflow: auto;
}
.newsList {
  width: 100%;
  height: 130px;
  margin-bottom: 20px;
}
.newsLeft {
  float: left;
  height: 100%;
  width: 150px;
}
.newsLeft img {
  width: 100%;
  height: 100%;
}
.newsRight {
  float: left;
  height: 100%;
  width: 215px;
  padding-left: 10px;
  position: relative;
}
.newsTitle {
  display: block;
  font-weight: bold;
  white-space: nowrap;
  font-size: 18px;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  height: 40px;
  line-height: 40px;
}
.newsContent {
  width: 100%;
  height: 35px;
  display: block;
  font-weight: lighter;
  font-size: 10px;
  color: #787878;
  text-align: left;
}
.functions {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  font-size: 11px;
  font-weight: lighter;
  color: #787878;
  text-align: left;
}
.like {
  position: absolute;
  right: 20px;
}
</style>
